import ProgressRing from '@/pages/iot/components/Progress.tsx';
import './alarmCard.css';
import { Flex, RadioChangeEvent } from 'antd';
import { FC, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useCatch } from '@/hooks';
import IotServices from '@/api/services/iotServices.ts';
import Card from '@/pages/iot/components/Card.tsx';

type Props = {
  carNo?: string;
};

const AlarmCard: FC<Props> = ({ carNo }) => {
  const catchFn = useCatch();
  const [type, setType] = useState('1');
  const onChange = (e: RadioChangeEvent) => {
    setType(e.target.value);
  };

  const { data } = useQuery({
    queryKey: ['alarmCountByCondition', type, carNo],
    queryFn: () => catchFn(() => IotServices.getAlarmCountByCondition({ order: type, carNo })),
    select: ({ data }) => data,
    staleTime: 0,
  });

  return (
    <Card title="报警次数" gap={32} onTypeChange={onChange} type={type}>
      <Flex align="center" gap={32}>
        <ProgressRing total={data?.alarmTotal ?? 0} activeTime={data?.interveneAlarmCount ?? 0} />

        <Flex gap={24} vertical>
          <Flex align="center" gap={8}>
            <div className="blue circle" />
            <div className="item-title">已上报的报警次数</div>
            <div className="num">{data?.interveneAlarmCount ?? 0}</div>
          </Flex>
          <Flex align="center" gap={8}>
            <div className="black circle" />
            <div className="item-title">未处理的报警次数</div>
            <div className="num">{data?.pushAlarmCount ?? 0}</div>
          </Flex>
        </Flex>
      </Flex>
    </Card>
  );
};

export default AlarmCard;
